<!--
 * @Author: jhw jiaxianshengye@gmail.com
 * @LastEditTime: 2025-07-31 18:39:35
 * @LastEditors: jhw
 * @Description: 文件描述
-->
<template>
  <div class="test-container">
    <h2>Vue Esign Plus 测试</h2>

    <div class="signature-area">
      <VueEsignPlus
        ref="vueEsignPlusRef"
        :width="800"
        :height="300"
        :line-width="4"
        :line-color="'#ff0000'"
        bg-color="rgba(210, 210, 210, 0.5)"
        :is-crop="true"
        :is-clear-bg-color="true"
      />
    </div>

    <div class="actions">
      <button @click="handleUndo">撤销</button>
      <button @click="handleReset">重置</button>
      <button @click="handleGenerate">生成图片 (PNG)</button>
      <button @click="handleGenerateCompressed">生成压缩图片 (JPEG)</button>
    </div>

    <div v-if="resultImage" class="result">
      <h3>生成的图片:</h3>
      <img :src="resultImage" alt="签名图片" />
      <p>图片大小: {{ imageSize }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { GenerateOptions } from 'VueEsignPlus/index'

const vueEsignPlusRef = ref()
const resultImage = ref('')
const imageSize = ref('')

const handleUndo = () => {
  vueEsignPlusRef.value.undo()
}

const handleReset = () => {
  vueEsignPlusRef.value.reset()
  resultImage.value = ''
  imageSize.value = ''
}

const handleGenerate = async () => {
  try {
    console.log('生成 PNG 图片')
    const res = await vueEsignPlusRef.value.generate()
    resultImage.value = res
    imageSize.value = `${((res.length * 0.75) / 1024).toFixed(2)} KB`
    console.log('生成的图片:', res)
  } catch (error) {
    console.error('生成图片失败:', error)
  }
}

const handleGenerateCompressed = async () => {
  try {
    console.log('生成压缩 JPEG 图片')
    const options: GenerateOptions = {
      format: 'image/jpeg',
      quality: 0.8,
      maxWidth: 400,
      maxHeight: 200,
    }
    const res = await vueEsignPlusRef.value.generate(options)
    resultImage.value = res
    imageSize.value = `${((res.length * 0.75) / 1024).toFixed(2)} KB`
    console.log('生成的压缩图片:', res)
  } catch (error) {
    console.error('生成压缩图片失败:', error)
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.signature-area {
  margin: 20px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.actions {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.result {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.result img {
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.result p {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}
</style>
